import {Box, TextField} from "@mui/material";
import {ChangeEventHandler, FC, ReactNode, useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import AppProvider from "../../../sources/AppProvider.ts";
import DGConnect from "../../../sources/DGConnect.ts";
import {Util} from "../../../sources/Util.ts";
import DGToast from "../../../components/DGToast.tsx";
import {AlertColor} from "@mui/material/Alert/Alert";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGTextView from "../../../components/DGTextView.tsx";
import {LoadingButton} from "@mui/lab";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";

interface CustomViewProps {
    children: ReactNode;
    value?: string | number;
    index?: string | number;
}

const CustomView: FC<CustomViewProps> = ({children, value, index, ...other}) => {
    return (<Box hidden={value !== index} style={{
        display: value !== index ? "none" : "flex",
        flexDirection: "column", gap: "10px"
    }} {...other}>{children}</Box>);
}

interface ChangeEmailProps {
    state: boolean,
    close: () => void,
}

interface DGToastProps {
    state: boolean,
    severity: AlertColor,
    text: string
}

const ChangeEmail: FC<ChangeEmailProps> = ({state, close}) => {
    // 获取程序上下文
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();
    // Toast 弹窗
    const [toast, setToast] = useState<DGToastProps>({state: false, severity: "info", text: ""});
    // 面板切换
    const [view, setView] = useState("index");
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 邮箱信息
    const [email, setEmail] = useState("");
    // 邮箱错误信息
    const [emailError, setEmailError] = useState({state: false, text: ""});
    // 验证码信息
    const [code, setCode] = useState("");
    // 验证码错误信息
    const [codeError, setCodeError] = useState({state: false, text: ""});


    // 关闭控制
    const handleClose = (id: number) => {
        // 关闭
        close();
        // 后退
        if (id === 1) router(-1);
    }


    // 获取验证码函数
    const handleGetCode = (id: number) => {
        // 清空邮箱错误信息
        setEmailError({state: false, text: ""});
        // 清空验证码错误信息
        setCodeError({state: false, text: ""});
        // 开始加载
        setLoading(true);
        // 发起请求获取验证码
        DGConnect.POST(JSON.stringify({info: "changeEmail", email: email, resend: id}), result => {
            // 关闭加载
            setLoading(false);
            // 返回错误信息 id = 0 为邮箱验证
            if (id === 0 && result['data']['code'] !== 200) return setEmailError({
                state: true, text: result['data']['message'] + "错误码：" + result["data"]["code"]
            });
            // 返回错误信息 id = 1 为验证码获取
            if (id === 1 && result['data']['code'] !== 200) return setCodeError({
                state: true, text: result['data']['message'] + "错误码：" + result["data"]["code"]
            });
            // 返回成功信息 id = 1 为验证码获取
            if (id === 1) setToast({state: true, severity: "success", text: '邮件发送成功！'});
            // 跳转验证码面板
            setView("code");
        }, error => {
            // 关闭加载
            setLoading(false);
            // 提示更改失败
            setEmailError({state: true, text: "遇到了一些问题，请尝试重试，或者及时联系我们！错误信息：" + error['stack']});
        });
    }


    // 更改邮箱函数
    const handleChangeEmail: ChangeEventHandler<HTMLInputElement> = e => {
        // 清空邮箱错误信息
        setEmailError({state: false, text: ""});
        // 设置邮箱信息
        setEmail(e.target.value);
        // 验证邮箱输入是否存在空格
        if (e.target.value.indexOf(' ') > -1) return setEmailError({state: true, text: "邮箱不允许存在空格"});
        // 判断邮箱输入是否正确
        if (e.target.value !== "" && !App!.Regex['email'].test(e.target.value)) {
            return setEmailError({state: true, text: "邮箱格式不正确！"});
        }
    }


    // 提交函数 -- 获取验证码
    const handleGetCodeSubmit = () => {
        // 清空邮箱错误信息
        setEmailError({state: false, text: ""});
        // 判断邮箱是否输入为空
        if (email === "") return setEmailError({state: true, text: "邮箱不能为空！"});
        // 判断邮箱输入是否一致
        if (App!.info && App!.info['email'] === email) return setEmailError({state: true, text: "邮箱没有任何修改！"});
        // 判断邮箱输入是否正确
        if (!App!.Regex['email'].test(email)) {
            return setEmailError({state: true, text: "邮箱格式不正确！"});
        }
        // 调用获取验证码函数
        handleGetCode(0);
    }


    // 更改验证码函数
    const handleChangeCode: ChangeEventHandler<HTMLInputElement> = e => {
        // 清空验证码错误信息
        setCodeError({state: false, text: ""});
        // 设置验证码信息
        setCode(e.target.value);
    }


    // 提交函数 -- 获取更改结果
    const handleGetResultSubmit = () => {
        // 判断验证码是否为空
        if (code === "") return setCodeError({state: true, text: "验证码不能为空！"});
        // 开始加载
        setLoading(true);
        // 发起验证码校验请求
        DGConnect.POST(JSON.stringify({info: "changeEmail", code: code}), result => {
            // 关闭加载
            setLoading(false);
            // 返回错误信息
            if (result['data']['code'] !== 200) return setCodeError({
                state: true, text: result['data']['message'] + "错误码：" + result["data"]["code"]
            });
            // 获取本地信息
            const userInfo = Util.Storage.getLocal("LOGIN-USER");
            // 验证是否邮箱
            if (App!.Regex['email'].test(userInfo['username'])) {
                // 将登陆账户和密码存储在本地
                Util.Storage.setLocal("LOGIN-USER", {username: email, password: userInfo['password']});
            }
            // 更新会话信息
            App!.setUserInfo(result['data']['result']);
            // 提示修改完成
            setToast({state: true, severity: "success", text: '邮箱已更改！'});
            // 关闭弹窗
            setTimeout(() => handleClose(1), 500);
        }, error => {
            // 关闭加载
            setLoading(false);
            // 提示更改失败
            setEmailError({state: true, text: "遇到了一些问题，请尝试重试，或者及时联系我们！错误信息：" + error['stack']});
        });
    }


    // 面板一提交按钮信息
    const Submit1 = {name: "继续", click: () => handleGetCodeSubmit()};
    // 面板二提交按钮信息
    const Submit2 = {name: "验证", click: handleGetResultSubmit};

    useEffect(() => {
        // 设置默认面板
        setView("index");
        // 清空邮箱和验证码信息
        setEmail("");
        setCode("")
        // 清空邮箱和错误码错误信息
        setEmailError({state: false, text: ""});
        setCodeError({state: false, text: ""});
    }, [state]);

    const ContentView = (<>
        {/* 未登录提示语 */}
        {!App!.info && <DGTextView Body Bold>您当前未登陆账户，服务不可用！</DGTextView>}
        {/* 已登录 */}
        {App!.info && <Box>
            {/* 初始面板显示 */}
            <CustomView value={view} index="index">
                {/* 显示当前邮箱 */}
                <DGTextView Body Bold>当前邮箱：{String(App!.info["email"])}</DGTextView>
                <DGTextView Body Bold>请输入一个未被绑定逐梦园账号的邮箱。</DGTextView>
                {/* 邮箱输入框 */}
                <TextField
                    type="text" variant="standard" label="请输入新的邮箱：" disabled={loading}
                    onChange={handleChangeEmail} error={emailError.state} helperText={emailError.text}
                    required={view === "index"} fullWidth/>
            </CustomView>

            {/* 验证码面板显示 */}
            <CustomView value={view} index="code">
                {/* 显示提示语 */}
                <DGTextView Body Bold color="error">
                    注意：请不要频繁获取验证码，会导致邮箱被我们锁定 168 小时。如您的邮箱被我们锁定，请前往安全中心提交材料进行解除。
                </DGTextView>
                {/* 验证邮箱提示语 */}
                <DGTextView variant="subtitle1" style={{fontWeight: "bold"}}>
                    为确保该邮箱归您所有，我们已将验证码发送至邮箱，请检查收件箱。
                    如您未收到验证码，请前往垃圾箱进行查看，或者点击（
                    <LoadingButton disabled={loading} loading={loading} onClick={() => handleGetCode(1)}>
                        重发
                    </LoadingButton>）。
                    如一直未收到验证码，请检查你的邮箱是否可用或使用其他邮箱进行验证。
                </DGTextView>
                {/* 验证码输入框 */}
                <TextField
                    type="number" variant="standard" label="请输入验证码：" disabled={loading}
                    onChange={handleChangeCode} error={codeError.state} helperText={codeError.text}
                    required={view === "code"} fullWidth/>
            </CustomView>
        </Box>}
    </>);


    return (<Box>
        {/* Toast 组件 */}
        <DGToast state={toast} close={() => setToast({state: false, severity: toast.severity, text: toast.text})}/>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            back={view === "code" ? {name: "上一步", click: () => setView("index")} : undefined}
            submit={App!.info ? (view === "index" ? Submit1 : Submit2) : undefined} load={loading}
            title="更改邮箱" state={state} close={() => handleClose(1)} PANEL AUTO>
            {ContentView}
        </DGDialogLayout>


        {/* DGDrawerLayout 样式 */}
        <DGDrawerLayout
            more={view === "code" ? {name: "上一步", click: () => setView("index")} : undefined}
            submit={App!.info ? (view === "index" ? Submit1 : Submit2) : undefined} load={loading}
            title="更改邮箱" state={state} close={() => handleClose(1)} flex="bottom" PANEL AUTO>
            {ContentView}
        </DGDrawerLayout>
    </Box>);
}

export default ChangeEmail;